<template>
    <div class="log-complete">
         <div @click="leftBtn" class="arrow-left">
          <img src="../../images/jiantou.png" alt="">
        </div>
        <div class="detail-header"></div>
        <div class="detail-body">
            <div class="timeline-demo">
                <timeline>
                    <timeline-item v-for="(item,index) in logInfo.list" :key="index">
                        <h4 class="recent">{{item.remark}}</h4>
                        <p class="recent">{{item.datetime}}</p>
                    </timeline-item>
                </timeline>
            </div>
            <div v-if="!logInfo||!logInfo.list" class="no-tip">当前物流信息为空</div>
        </div>
    </div>
</template>
<script>
import { Timeline,TimelineItem } from "vux";
import CONSTANT from "../../../wechat/static/constant/urlconstant";
import common from "../../../wechat/static/common/common";
export default {
    components: {
        Timeline,TimelineItem
    },
    methods:{
    },
    data() {
      return {
        logInfo:{}
      }   
    },
    mounted() {
        this.getLog()
    },
    methods: {
        leftBtn(){
            this.$router.back(-1)
        },
        getLog(){
            let url = CONSTANT.LIST.expQueryParam
            common.post(url, {
                com:this.$route.query.logisticsCompany,
                no:this.$route.query.logistics
            }, (res) => {
            	if (res.code == 200) {
                    let data = res.data.bussData
                    this.logInfo = JSON.parse(data)
                    if(this.logInfo.list){
                        this.logInfo.list = this.logInfo.list.reverse()
                    }
                }
            })
        },
    }
}
</script>
<style lang="less">
.log-complete{
    position: relative;
    height: 100%;
    overflow-y: auto;
    background-color:#F6F6F6;
    .no-tip{
        text-align: center;
        padding-bottom: 20px;
    }
    .arrow-left{
        position: absolute;
        left: .2rem;
        top: .2rem;
        height: .9rem;
        width: 1rem;
        z-index: 99;
        img{
        height: .4rem;
        width: .4rem;
        }
    }
    .weui-dialog{
        font-size: .32rem;
    }
    .weui-label, .weui-input{
        font-size: .32rem;
    }
    .detail-header{
        margin-bottom: .2rem;
        height:.8rem;
        background:linear-gradient(-90deg,rgba(255,151,86,1),rgba(255,94,114,1));
        .detail-addr{
            position: absolute;
            top: 1.46rem;
            left: .24rem;
            img{
                width:7.02rem;
                height:1.6rem;
            }
            .detail-addr-container{
                position: absolute;
                top: .46rem;
                left: .25rem;
                .text-two{
                    display: flex;
                    align-items: center;
                    height:.22rem;
                    font-size:.28rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(34,34,34,1);
                    line-height:.22rem;
                    margin-bottom: .26rem;
                .text-name{
                    margin-right: .25rem;
                  
                }

                }
            .text-addr{
                font-size:.26rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(102,102,102,1);

            }

            }
        }

    }
    .detail-body{
        padding: 0 .26rem;
        box-sizing: border-box;
        background-color: rgba(255,255,255,1);
        margin-bottom: .2rem;
        margin-top: .1rem;
        .code-complete{
            height:.88rem;
            background:rgba(255,255,255,1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: .01rem solid #EEEEEE;

            .code-complete-left{
                font-size:.28rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(51,51,51,1);
            }
            .code-complete-right{
                .code-complete-left;
                color:#FF7268;
            }
        }
        .detail-good{
            display: flex;
            align-items: center;
            flex-direction: row;
            padding: .29rem 0;
            border-bottom: .01rem solid #EEEEEE;

            img{
                width:2rem;
                height:2rem;
                margin-right: .32rem;

            }
            .detail-good-right{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                vertical-align: top;
                .right-text1{
                    vertical-align: top;
                    font-size:.3rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(51,51,51,1);
                    margin-bottom: .28rem;
                    line-height: .32rem;

                }
                .right-text2{
                    font-size:.26rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(153,153,153,1);
                    margin-bottom: 0;
                    /*line-height: .25rem;*/
                }
                .good-refund {
                    text-align: right;
                    color: #fd2024;
                    font-size: .28rem;
                    font-weight: bold;
                }
                .right-text3{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .text3_1{
                        font-size:.2rem;
                        font-family:PingFang-SC-Medium;
                        font-weight:500;
                        color:#FF7268;

                    }
                .text3_2{
                    font-size:.26rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(102,102,102,1);
                }

                }

            }

        }
        .detail-good:nth-last-child(1){
            border: none;

        }
        
        
    }
    .vux-timeline{
        padding: .2rem;
    }
    .vux-timeline-item-content{
        padding:0 0 .3rem .8rem;
    }
    .timeline-demo {
        p {
            color: #888;
            font-size: 0.24;
        }
        h4 {
            color: #666;
            font-weight: normal;
            font-size: .2rem;
        }
        .recent {
            color: rgb(4, 190, 2)
        }
    }
}
</style>
